<template>
  <el-tabs type="border-card" v-model="activeName" @tab-click="handleClick" class="left_tree_tap">
    <el-tab-pane label="单元格" name="first">
      <el-header class="height_auto pdbt">
        <el-row :gutter="6" class="bk_padding_le_rg">
          <el-col :span="12">
              <span style="font-size: 14px;">选交叉点位置，双击添加，或多选添加</span>
          </el-col>
        </el-row>
      </el-header>
        <el-main style=" overflow-y: hidden;">
            <el-row align="middle">
                <el-col :span="21">
                    <el-scrollbar style="height:700px">
                        <ps-tree
                            ref="tbdwTree"
                            :tree-comp-data="tbdwlTreeData"
                            @createRightMenu="createRightMenu"
                            @refresh="refresh"
                            @onTreeClick="treeClick"
                        />
                    </el-scrollbar>
                </el-col>
                <el-col :span="3" class = "elCol">
                    <el-scrollbar class="elscrollbar">
                        <el-button
                            type="primary"
                            plain
                            size="mini"
                            @click="addDYG"
                            class="elButton"
                            >》
                        </el-button>
                    </el-scrollbar>
                </el-col>
            </el-row> 
        </el-main>
        <vxe-modal v-model="addFl" v-if="addFl" title="选择连接符" width="300px" height="200px" size="small" destroy-on-close>
          <el-row :gutter="6" class="bk_padding_le_rg" style="margin-top:30px;margin-left:15px">
            <el-col :span="6">
                <el-button size="mini" @click="addClick('+')">＋</el-button>
            </el-col>
            <el-col :span="6">
                <el-button size="mini" @click="addClick('-')">－</el-button>
            </el-col>
            <el-col :span="6">
                <el-button size="mini" @click="addClick('*')">*</el-button>
            </el-col>
            <el-col :span="6">
                <el-button size="mini" @click="addClick('/')">÷</el-button>
            </el-col>
          </el-row>
          <el-row :gutter="6" class="bk_padding_le_rg" style="margin-top:30px;margin-left:50px">
            <el-col :span="12">
              <el-button type="primary" size="mini" @click="saveClick">确定</el-button>
            </el-col>
            <el-col :span="12">
              <el-button size="mini" @click="closeClick">关闭</el-button>
            </el-col>
          </el-row>
        </vxe-modal>
    </el-tab-pane>
    <el-tab-pane label="函数" name="second">
      <function-Selector @funClick="funClick" />
    </el-tab-pane>
  </el-tabs>
</template>
<script>
  import request from "@/utils/requestutil";
  import {getRealUrl, syncRequest} from "@/utils/httpRequet";
  import $ from "jquery";
  import treeExhide from "@/components/ztree/lib/jquery.ztree.exhide.min.js";
  import dicPanel from '@/hr/utils/dicPanel'
  import { options } from 'runjs';
  import psTree from '@/components/psTree/psTree';
  import { isNull } from 'xe-utils/methods';
  import functionSelector from '@/components/FunctionSelector/FunctionSelector'
  export default {
     components: {
      psTree,
      dicPanel,
      functionSelector,
    },
    data() {
      return {
        lable:"",
        bzcode:"",
        searchVal: '',
        ttId:"",
        tsCd:"",
        clsAD:"",//指标方向
        treeParam:{},
        field181Options: [],
        value:"",
        orgschval: "",
        cheNodes:"",
        strOperator:"+",//运算符
        addFl:false,
        bzcode : "TBJJ",    
        tbdwlTreeData: {
          treeConfigKey:'BNSH_ZB_TREE',
          // treeConfigKey:'ZBGL_TI_INDEX_TREE',
          treeBuildConfig:{
            beforeDrop: this.beforeDrop, 
            dealTreaparam:this.dealTreaparam,
            dataFilter:this.datafilter,
            beforeDblClick:this.beforeDblClick,
            beforeDrag:this.beforeDrag,
            isEdit:true,
            editShowType: 2, 
            //设置树的复选框
            options:{
              check: {
                chkboxType: { 'Y': 'ps', 'N': 's' },
                enable: true
              },
            }
          }
        },
        activeName: 'first'
      };
    },
    methods: {
        //添加按钮事件
        sumClick(){
            this.$emit('sumClick', this.value)
        },
      //函数双击事件
      funClick(val) {
        this.val = val
        this.$emit('hssClick', val)
      },
      handleClick(tab, event) {
        
      },
      createRightMenu(params)
      {
           params.items = []
      },
      datafilter(treeid,pnode,resdata){
        let t = this;
        let tree = [];
        if(resdata && resdata.data&& resdata.data.length>0){
          t.$_.forEach(resdata.data,(item,val)=>{
            if(item.leaf=='0')item.isParent=true
          });
        }else{
          if(pnode) pnode.isParent=false;
        }
        if (pnode == undefined) {
          //查询根节点
          if(t.bzcode != "" &&t.ttId != "" && t.tsCd !="")
          {
            let tsUn=t.$store.state.user.userInfo.deptId
            let res = syncRequest({
              url:"bnshDygTreeData",
              method:"post",
              async: false, 
              data:{bzcode:t.bzcode,ttId:t.ttId,tsCd:t.tsCd,clsAD:t.clsAD,tsUn:tsUn}
            })
            let strTreeData = eval(res.data)
            //if(strTreeData.length > 0){
            tree =  strTreeData
            // }else{
            //    this.$message.warning("该表单下没有相关指标，请刷新或者联系管理员！");
            // }
          }
          resdata.data = tree;
        }
        return resdata.data;
      },
      dealTreaparam(treeid,node){
        const _that = this;
        if(node==undefined || node==''){    
          return {p0:"ROOT",p1:"ROOT",p2:"ROOT"}
        }
      },
      beforeDrop(treeId, treeNodes, targetNode) {
          return false;
      },
      //指标双击事件
      beforeDblClick(treeId,treeNode)
      {
        if(treeNode.tiINm && treeNode.tiINm != "undefined"){
          this.$emit('zbsClick', "@"+treeNode.id+"")
        }
        this.$emit('afterZbDblClick', treeNode)
        return false;
      },
      beforeDrag() {
        return false;
      },
      //加载指标树
      zbLodeTree(bzcode,ttId,tsCd,clsAD){
        this.bzcode=bzcode;
        this.ttId=ttId;
        this.tsCd=tsCd;
        this.clsAD=clsAD;
      },
      refresh(node) {
        this.$refs.tbdwTree.refresh()
      },
      treeClick(e, treeid, node){
        let _t = this;
        let tiIRtp = node.tiIRtp;
        if(isNull(tiIRtp) || tiIRtp == undefined || tiIRtp == ""){
           _t.field181Options=[];
           _t.value = "";
          return false;
        }else{
          request({
            url:"bnshXgflData",
            method:"post",
            params:{bzcode:_t.bzcode,tiIRtp:tiIRtp}
          }).then(function(data){
            if(data.data.length > 0){
              _t.field181Options=data.data;
              _t.value = data.data[0].tcCtCd;
            }
          })
        }
      },
      //切换编辑区域的校验类型架子单元格树
      dygData(bzcode,ttId,tsCd,clsAD){
        this.bzcode=bzcode;
        this.ttId=ttId;
        this.tsCd=tsCd;
        this.clsAD=clsAD;
        this.$nextTick(()=>{
          this.$refs.tbdwTree.refresh();
        })
      },
      //添加单元格
      addDYG(){
        let checkNodes = this.$refs.tbdwTree.ztreeObj.getNodes()[0].children;
        let strNodes = "";
        let idx = 0
        //console.log(checkNodes)
        if(checkNodes.length>0){
          for(var i = 0;i<checkNodes.length;i++){
            if(checkNodes[i].checked){
              strNodes +=checkNodes[i].id+",";
              idx++
            }
          }
          this.cheNodes = strNodes.substring(0,strNodes.length-1);
          if (idx == 1) {
            this.$emit('zbsClick', "@"+this.cheNodes) 
            return false
          }
          this.addFl=true;
        }else{
          this.$message.warning("没选择节点，无法添加！");
          return false
        }
      },
      closeClick(){
        this.addFl=false;
      },
      saveClick(){
        this.addFl=false;
        let allVal = " "+this.strOperator+" @"
        console.log(this.cheNodes);
        this.$emit('zbsClick', "@"+this.cheNodes.replace(new RegExp(',', "g"), allVal) + " ")
        //this.$emit('zbsClick', "@"+this.cheNodes.replaceAll(',',allVal)+" ") 
      },
      addClick(val){
        this.strOperator = val
      }
    }
  };
</script>
<style lang="scss" scoped>
.tabl ::v-deep{ 
    .el-tabs__header {
      margin-bottom: 0px;
      height: 33px;
      .el-tabs__nav-scroll{ height: 33px;}
  }
}
.elscrollbar{
  height: 700px;
  padding-top: 290px;
}
.elButton{
  width: 10px;
  height: 50px;
}
</style>